<template>
  <div class="icon">
    <div class="icon-item" v-for="item in iconList" :key="item.id">
      <img :src="item.url" />
      <p>{{item.title}}</p>
    </div>
  </div>
</template>

<script>
  export default{
    props:['iconList'],
    data(){
      return{

      }
    }
  }
</script>

<style>
  .icon{
    width: 100%;
    overflow: hidden;
    background-color: #fff;
  }
  .icon-item{
    height: 0;
    width: 25%;
    float: left;
    padding-bottom: 25%;
  }
  .icon-item img{
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 auto;
    padding-top: .1rem;
    display: block;
  }
  .icon-item p{
    font-size: .25rem;
    color: #212121;
    text-align: center;
    margin-top: .1rem;
  }
</style>
